<template>
	<view>
		<navbar title="租赁订单" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__t">
				<u-tabs :list="list4" lineWidth="26rpx" lineHeight='7rpx' lineColor="#3262FD" :activeStyle="{
				            color: '#1E1E1E',
				            fontWeight: 'bold',
				        }" :inactiveStyle="{
				            color: '#949494',
							fontWeight: 'bold',
				        }" itemStyle="padding-left: 35rpx; padding-right: 35rpx; height: 56rpx;font-szie:30rpx;" @click="clicktab">
				</u-tabs>
			</view>
			<view class="con__b">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="con__list" v-if="list.length>0">
						<view class="con__list__item" v-for="(item,index) in list" :key="index">
							<view class="u-flex" v-if="item.goodsInfo">
								<image :src="URL(item.goodsInfo.image)" class="con__list__item__pic" mode=""></image>
								<view class="">
									<view class="con__list__item__name u-line-1">
										{{item.goodsInfo.name}}
									</view>
									<view class="con__list__item__t u-line-1">
										规格:{{item.ggtext}}
									</view>
									<view class="con__list__item__t u-line-1">
										租期:{{$u.timeFormat(item.createtime, 'yyyy.mm.dd')}}-{{$u.timeFormat(item.createtime+60*60*24*30*item.qishu, 'yyyy.mm.dd')}}（{{item.qishu*30}}天）
									</view>
									<view class="con__list__item__t u-line-1">
										总租金:￥{{(item.rent*item.qishu).toFixed(2)}}（分{{item.qishu}}期）
									</view>
									<view class="con__list__item__t u-line-1">
										数量: {{item.num}}
									</view>
								</view>
							</view>
							<view class="u-flex u-flex-y-center u-flex-between" style="margin-top: 48rpx;">
								<view class="con__list__item__status s1" v-if="item.status==5">
									已完成
								</view>
								<view class="con__list__item__status s2" v-if="item.status==4">
									待归还
								</view>
								<view class="con__list__item__status s3" v-if="item.status==3">
									待收货
								</view>
								<view class="con__list__item__status s4" v-if="item.status==2">
									待发货
								</view>
								<view class="con__list__item__status s4" v-if="item.status==1">
									待审核
								</view>
								<u-button @click="navto('/pages/lease/orderdetail?id='+item.id)" v-if="item.status==4|item.status==5"
									hairline plain color="#B1B1B1"
									:customStyle='{width:"130rpx",height:"50rpx",margin:0,padding:0,borderRadius:"5rpx",fontSize:"24rpx",color:"#1E1E1E"}'>查看详情</u-button>
								<u-button v-if="item.status==3" color="#3262FD" text='确认收货' @click="qrsh(item)" :loading="item.loading"
									:customStyle='{width:"130rpx",height:"50rpx",margin:0,padding:0,borderRadius:"5rpx",fontSize:"24rpx",color:"#fff"}'></u-button>
								<u-button v-if="item.status==2||item.status==1" :loading="item.loading" color="#FD7A32" @click="cancel(item)" text='取消订单'
									:customStyle='{width:"130rpx",height:"50rpx",margin:0,padding:0,borderRadius:"5rpx",fontSize:"24rpx",color:"#fff"}'></u-button>
							</view>
						</view>
					</view>
					<u-empty v-else></u-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				list4: [{
					name: '全部',
					status:''
				}, {
					name: '待审核',
					status:1
				}, {
					name: '待发货',
					status:2
				}, {
					name: '待收货',
					status:3
				}, {
					name: '待归还',
					status:4
				}, ],
				list: [],
				status:'',
				qishulist:[
					{t:1,v:6},
					{t:2,v:12},
					{t:3,v:24},
				],
			};
		},
		methods:{
			cancel(item){
				let _this=this
				uni.showModal({
					title:'确定要取消改订单？',
					success(r) {
						if(r.confirm){
							item.loading=true
							user.cancelOrder({id:item.id}).then((res)=>{
								if(res.data.code==1){
									item.loading=false
									uni.$u.toast('取消成功')
									_this.getlist()
								}
							})
							_this.$forceUpdate()
						}
					}
				})
			},
			qrsh(item){
				let _this=this
				uni.showModal({
					title:'确定该订单已收货？',
					success(r) {
						if(r.confirm){
							item.loading=true
							user.editOrder({id:item.id,status:4}).then((res)=>{
								if(res.data.code==1){
									item.loading=false
									uni.$u.toast('收货成功')
									_this.getlist()
								}
							})
							_this.$forceUpdate()
						}
					}
				})
			},
			async getlist(){
				let res = await user.myOrder({status:this.status})
				if(res.data.code==1){
					let gglist=[]
					this.list=res.data.data
					this.list.map(t=>{
						t.qishu=this.qishulist[Number(t.hire_num)-1].v
						JSON.parse(t.spec_json).map(t1=>{
							gglist.push(t1.name)
						})
						t.ggtext=gglist.join(',')
						t.loading=false
					})
					
				}
			},
			clicktab(e){
				console.log(e)
				this.status=e.status
				this.getlist()
			}
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		&__t {
			height: 104rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
		}

		&__b {
			height: calc(100vh - 44px - var(--status-bar-height) - 104rpx - 72rpx);
			background-color: #f8f8f8;
			padding: 30rpx 30rpx 42rpx;
		}

		&__list {
			&__item {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				padding: 34rpx 26rpx 30rpx 30rpx;

				&__pic {
					width: 177rpx;
					height: 177rpx;
					background: #3262FD;
					border-radius: 15rpx;
					margin-right: 18rpx;
				}

				&__name {
					width: 410rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #1E1E1E;
					line-height: 30rpx;
					margin: 9rpx 0 0;
				}

				&__t {
					width: 410rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
					line-height: 24rpx;
					margin-top: 18rpx;
				}

				&__status {
					width: 107rpx;
					height: 51rpx;

					border-radius: 5rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;

					line-height: 24rpx;
				}

				.s1 {
					background: #F1F5F8;
					color: #626667;
				}

				.s2 {
					background: rgba(253, 122, 50, .15);
					color: #FD5832;
				}

				.s3 {
					background: #E0E8FF;
					color: #3262FD;
				}

				.s4 {
					background: rgba(36, 173, 36, .2);
					color: #24AD24;
				}

			}
		}
	}
</style>